import React, { useState, useContext, useEffect } from "react";
import {
  Tabs,
  Form,
  Row,
  Col,
  Select,
  Input,
  Radio,
  Switch,
  Button,
  message,
} from "antd";

import { Context } from "../../../../../store/MyContext";
import http from "../../../../../services/service";

import "antd/dist/antd.css";
import "./tabs.scss";

const key = "updatable";
const { TabPane } = Tabs;

// const { Search } = Input;

function callback(key) {
  console.log(key);
}

const validateMessages = {};

// const layout = {
//   labelCol: {
//     span: 2,
//   },
//   wrapperCol: {
//     span: 22,
//   },
// };

// 表格数据
const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    proId: `${i}`,
    proName: `Edward King ${i}`,
    cost: 9,
    sales: 0,
    address: `London, Park Lane no. ${i}`,
    status: 0,
    salesNum: 9,
  });
}

export default function AddTab(props) {
  const context = useContext(Context);

  const { chinaCity, alOrganization, form, getAllSingleSet } = props;
  // const [form] = Form.useForm();

  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [singleItemData, setSingleItemData] = useState([]);

  useEffect(() => {
    console.log("singleItemData", singleItemData.phy_id);
    setSingleItemData(context.singleCheckItem);
    form.setFieldsValue({
      itemObj: {
        phy_projectName: singleItemData.phy_projectName,
        phy_proId: singleItemData.phy_proId,
        phy_oldPrice: singleItemData.phy_oldPrice,
        phy_salePrice: singleItemData.phy_salePrice,
        area: singleItemData.area,
        org_name: singleItemData.org_name,
        phy_suitTag: singleItemData.phy_suitTag,
        phy_suitRange: singleItemData.phy_suitRange,
        phy_checkMean: singleItemData.phy_checkMean,
        phy_notices: singleItemData.phy_notices,
        state: singleItemData.state,
      },
    });
  });

  //点击edit

  const onFinish = (values) => {
    console.log(values.itemObj);
    http
      .post("/editSingleSet", { ...values.itemObj, id: singleItemData.phy_id })
      .then((response) => {
        message.loading({ content: "正在编辑...", key });
        setTimeout(() => {
          message.success({ content: "已完成!", key, duration: 2 });
        }, 100);
        getAllSingleSet();
        context.showAddModal();
        form.resetFields();
      });
  };

  let selectOption = (props) => {
    // selectedRowKeys = props;
    setSelectedRowKeys(props);
    // console.log(222, selectedRowKeys);
  };

  function onSelectChange(selectedRowKeys) {
    // console.log("selectedRowKeys changed: ", selectedRowKeys);
    setSelectedRowKeys(selectedRowKeys);
    selectOption(selectedRowKeys);
  }

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  return (
    <Tabs defaultActiveKey='1' onChange={callback}>
      <TabPane tab='基本信息' key='1'>
        <Form
          form={form}
          name='itemObjForm'
          onFinish={onFinish}
          validateMessages={validateMessages}
        >
          <Row gutter={24}>
            {/* 套餐名称 */}
            <Col
              className='colStyle'
              xl={{ span: 12 }}
              md={{ span: 8 }}
              sm={{ span: 12 }}
              xs={{ span: 24 }}
            >
              <Form.Item
                name={["itemObj", "phy_projectName"]}
                // name='phy_projectName'
                label='体检项目名称'
                rules={[
                  {
                    required: true,
                    message: "Please input your name",
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
            {/* 套餐ID */}
            <Col
              className='colStyle'
              xl={{ span: 12 }}
              md={{ span: 8 }}
              sm={{ span: 12 }}
              xs={{ span: 24 }}
            >
              <Form.Item
                name={["itemObj", "phy_proId"]}
                label='体检项目ID'
                rules={[
                  {
                    required: true,
                    message: "Please input your name",
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
            {/* 原价 */}
            <Col
              className='colStyle'
              xl={{ span: 12 }}
              md={{ span: 8 }}
              sm={{ span: 12 }}
              xs={{ span: 24 }}
            >
              <Form.Item
                name={["itemObj", "phy_oldPrice"]}
                label='原价'
                rules={[
                  {
                    required: true,
                    message: "Please input your name",
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>{" "}
            {/* 售价 */}
            <Col
              className='colStyle'
              xl={{ span: 12 }}
              md={{ span: 8 }}
              sm={{ span: 12 }}
              xs={{ span: 24 }}
            >
              <Form.Item
                name={["itemObj", "phy_salePrice"]}
                label='售价'
                rules={[
                  {
                    required: true,
                    message: "Please input your name",
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
            {/* 适用地区 */}
            <Col
              className='colStyle'
              xl={{ span: 12 }}
              md={{ span: 8 }}
              sm={{ span: 12 }}
              xs={{ span: 24 }}
            >
              <Form.Item
                name={["itemObj", "area"]}
                label='适用城市'
                rules={[
                  {
                    required: true,
                    message: "Please input your name",
                  },
                ]}
              >
                <Select placeholder='请选择城市'>
                  {chinaCity.map((item, index) => (
                    <Select.Option key={index} value={item.cityName}>
                      {item.cityName}
                    </Select.Option>
                  ))}
                </Select>
              </Form.Item>
            </Col>
            {/* 适用机构 */}
            <Col
              className='colStyle'
              xl={{ span: 6 }}
              md={{ span: 8 }}
              sm={{ span: 12 }}
              xs={{ span: 24 }}
            >
              <Form.Item
                name={["itemObj", "org_name"]}
                label='适用机构'
                rules={[
                  {
                    required: true,
                    message: "Please input your name",
                  },
                ]}
              >
                <Select>
                  {alOrganization.map((item, index) => (
                    <Select.Option key={index} value={item.org_name}>
                      {item.org_name}
                    </Select.Option>
                  ))}
                </Select>
              </Form.Item>
            </Col>
            {/* 适用标签 */}
            <Col
              className='colStyle'
              xl={{ span: 24 }}
              md={{ span: 24 }}
              sm={{ span: 12 }}
              xs={{ span: 24 }}
            >
              <Form.Item
                name={["itemObj", "phy_suitTag"]}
                label='适用标签'
                rules={[
                  {
                    required: true,
                    message: "Please pick an item!",
                  },
                ]}
              >
                <Radio.Group>
                  <Radio.Button value='男性项目'>男性项目</Radio.Button>
                  <Radio.Button value='女性项目'>女性项目</Radio.Button>
                  <Radio.Button value='已婚项目'>已婚项目</Radio.Button>
                  <Radio.Button value='未婚项目'>未婚项目</Radio.Button>
                  <Radio.Button value='不区分性别'>不区分性别</Radio.Button>
                  <Radio.Button value='不区分婚否'>不区分婚否</Radio.Button>
                </Radio.Group>
              </Form.Item>
            </Col>
            {/* 是否启用 */}
            <Col
              className='colStyle'
              xl={{ span: 12 }}
              md={{ span: 8 }}
              sm={{ span: 12 }}
              xs={{ span: 24 }}
            >
              <Form.Item
                name={["itemObj", "state"]}
                label='是否启用'
                valuePropName='checked'
                rules={[
                  {
                    required: true,
                    message: "Please pick an item!",
                  },
                ]}
              >
                <Switch />
              </Form.Item>
            </Col>
            {/* 检查范围 */}
            <Col
              className='colStyle'
              xl={{ span: 24 }}
              md={{ span: 24 }}
              sm={{ span: 12 }}
              xs={{ span: 24 }}
            >
              <Form.Item
                name={["itemObj", "phy_suitRange"]}
                label='检查范围'
                rules={[
                  {
                    required: true,
                    message: "Please input your name",
                  },
                ]}
              >
                <Input.TextArea autoSize={{ minRows: 2, maxRows: 12 }} />
              </Form.Item>
            </Col>
            {/* 检查意义 */}
            <Col
              className='colStyle'
              xl={{ span: 24 }}
              md={{ span: 24 }}
              sm={{ span: 12 }}
              xs={{ span: 24 }}
            >
              <Form.Item
                name={["itemObj", "phy_checkMean"]}
                label='检查意义'
                rules={[
                  {
                    required: true,
                    message: "Please input your name",
                  },
                ]}
              >
                <Input.TextArea autoSize={{ minRows: 2, maxRows: 12 }} />
              </Form.Item>
            </Col>
            {/* 注意事项 */}
            <Col
              className='colStyle'
              xl={{ span: 24 }}
              md={{ span: 24 }}
              sm={{ span: 12 }}
              xs={{ span: 24 }}
            >
              <Form.Item
                name={["itemObj", "phy_notices"]}
                label='注意事项'
                rules={[
                  {
                    required: true,
                    message: "Please input your name",
                  },
                ]}
              >
                <Input.TextArea autoSize={{ minRows: 2, maxRows: 12 }} />
              </Form.Item>
            </Col>
            <Col
              className='colStyle'
              xl={{ span: 24 }}
              md={{ span: 24 }}
              sm={{ span: 24 }}
              xs={{ span: 24 }}
            >
              <Row type='flex' align='middle' justify='center'>
                <div>
                  <Button
                    type='primary'
                    htmlType='submit'
                    style={{ marginRight: "15px" }}
                  >
                    确定
                  </Button>
                  {/* onClick={context.addA(10)} */}
                  <Button type='ghost' onClick={context.showAddModal}>
                    取消
                  </Button>
                </div>
                {/* <span>
                  data from store:{context.isVisible ? "true" : "false"}
                </span> */}
                {/* <Button type='ghost' onClick={context.showModal}>
                  添加
                </Button> */}
              </Row>
            </Col>
          </Row>
        </Form>
      </TabPane>
    </Tabs>
  );
}
